<template>
	<transition name="modal">
		<div class="modal" v-show="showModal">
			<div class="mask">
				<div class="modal-dialog">
					<div class="modal-header">
						<span>{{title}}</span>
						<a href="javascript:;" class="icon-close" @click="closeModal"></a>
					</div>
					<div class="modal-body">
						<slot name="body"></slot>
					</div>
					<div class="modal-footer">
						<div class="btn-group">
							<a href="javascript:;" class="btn"  @click="submit">{{sureText}}</a>
							<a href="javascript:;" v-if="btnType!=='1'" class="btn btn-default" @click="closeModal">{{cancelText}}</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	export default{
		props:{
			//弹框类型 小中大
			modalType:{
				type:String,
				default:'form'
			},
			//标题
			title:String,
			//按钮类型：1只有确定按钮 2只有取消按钮i  3 都有
			btnType:String,
			sureText:{
				type:String,
				default:'确定'
			},
			cancelText:{
				type:String,
				default:'取消'
			},
			showModal:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			closeModal(){
				this.$emit('closeModal')
			},
			submit(){
				this.$emit('submit')
			}
		}
	}
</script>

<style lang="less">
	@import url("./../assets/css/mixin.less");
	@import url("./../assets/css/modal.less");
	
	.modal-enter-active,
	.modal-leave-active{
		transition: all .5s; 
	}
	.modal-enter,
	.modal-leave-to{
		opacity: 0;
	}
</style>
